<template>
  <div class="top_wrap">
    <div v-if="loginState">
      <!-- 用户已登录 -->
      <span>当前用户：{{user}}</span>
      <el-button 
        class="btn" 
        type="danger" 
        @click="handleClick" 
        size="mini"
        plain>注销</el-button>
    </div>
    <div v-else>
      <!-- 未登录 -->
      <span>未登录</span>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'TopBar',
    computed: {
      loginState() {
        // 获取缓存数据即可
        let CASTGC = this.$store.state.CASTGC
        return CASTGC !== ''
      },
      // 用户名（学号）
      user() {
        let CASTGC = this.$store.state.CASTGC
        if(CASTGC) {
          return CASTGC.substr(4, 10)
        }
        else return null
      }
    },
    methods: {
      // 注销登录
      handleClick() {
        // 1 删除CASTGC的值
        this.$store.commit('handleLogout')
        // 2 删除缓存中的数据
        window.localStorage.removeItem('CASTGC')
        window.localStorage.removeItem('gzhu-username')
        window.localStorage.removeItem('gzhu-password')
        // 3 跳转到登录页
        this.$router.replace('/login')
      }
    }
  }
</script>

<style scoped>
  .btn {
    margin: 0 10px;
  }
</style>